<template>
  <div class="task-item">
    <div class="task-info">
      <h3>{{ task.title }}</h3>
      <p>{{ task.desc }}</p>
      <span class="status-tag" :class="task.status">{{ task.status }}</span>
      <p>截止日期: {{ task.deadline }}</p>
    </div>
    <button @click="handleDelete" class="delete-btn">删除</button>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import { useTaskStore } from '@/store/taskStore'

const props = defineProps<{
  task: {
    id: number
    title: string
    desc: string
    status: 'todo' | 'doing' | 'done'
    deadline: string
  }
}>()

const taskStore = useTaskStore()

const handleDelete = () => {
  taskStore.deleteTask(props.task.id)
}
</script>

<style scoped>
.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  margin: 10px 0;
  border-radius: 8px;
  background: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.status-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 8px;
  font-size: 12px;
}

.todo { background: #f8d7da; color: #842029; }
.doing { background: #fff3cd; color: #664d03; }
.done { background: #d1e7dd; color: #0f5132; }

.delete-btn {
  background: #dc3545;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}
</style>